<template>
  <div class="main">
    <van-tabs v-model="active">
      <van-tab title="前端面试题">
        <div class="e-item" v-for="e in question" :key="e.index">
          <div :class="e.isShowQ?'show':'hide'" @click="e.isShowQ=!e.isShowQ">
            <span>{{e.title}}</span>
            <span class="num">
              <span>{{e.subArr.length}}</span>
              <van-icon :name="e.isShowQ?'arrow-down':'arrow'" />
            </span>
          </div>
          <div v-if="e.isShowQ">
            <p v-for="i in e.subArr" :key="i.index" @click="$router.push('/detail')">
              <span>{{i.title}}</span>
              <van-icon class="arrow-in" name="arrow" />
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="java面试题">内容 2</van-tab>
    </van-tabs>
  </div>
</template>

<script>
const arr = [
  {
    title: '前端高频面试题',
    isShowQ: false,
    subArr: [
      { title: '如何理解执行上下文' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' },
      { title: '如何理解作用域链' }
    ]
  },
  {
    title: '前端基础面试题',
    isShowQ: false,
    subArr: [{ title: '你是个傻掉吗' }]
  }
]
import axios from 'axios'
import Qs from 'qs'
axios.defaults.baseURL = 'http://42.194.195.126/api'
// axios.defaults.headers.common['Authorization'] =
//   'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiI4ZDc0OWFkMWEyYjY0NGRlYTM1MGY3MzIwNjdmZDk3OCIsInVuIjoiIiwicGYiOiJLU1IiLCJycyI6W10sImV4cCI6MTU5MjcxODUwMX0.1cWeoW2e5QIsr647tPGq6xQn7AD-j766bFNCCXW8RdnmwPCWEI0Pvoh3Crt0sYhABKq8AuDzvJct_v2XkBcSQA'
axios.defaults.headers.post['Content-Type'] =
  'application/x-www-form-urlencoded'
axios.interceptors.request.use(config => {
  console.log(config.data, 'config.data')
  return config
})
export default {
  data() {
    return {
      active: 0,
      // isShowQ: false,
      question: [
        {
          title: '前端高频面试题',
          isShowQ: false,
          subArr: [
            { id: 1, title: '如何理解执行上下文' },
            { id: 2, title: '如何理解作用域链' },
            { id: 3, title: '如何理解原型链' },
            { id: 4, title: '什么是闭包' },
            { id: 5, title: '继承有哪些方法' },
            { id: 6, title: '什么是深/浅拷贝，有哪些实现方式' },
            { id: 7, title: '数组有哪些常用方法' },
            { id: 8, title: 'DOM节点创建和修改有哪些常用API' },
            { id: 9, title: 'CSS清除浮动有哪些方法' },
            { id: 10, title: 'CSS选择器优先级' },
            { id: 11, title: 'CSS清除浮动有哪些方法' },
            { id: 12, title: 'CSS实现三列布局（左右固定宽度，中间自适应）' },
            { id: 13, title: '谈一下flex布局' },
            { id: 14, title: '谈一下盒模型' },
            { id: 15, title: 'transition动画和animation有什么区别' },
            { id: 16, title: 'H5自适应方案' },
            { id: 17, title: 'call/apply/bind作用和区别' },
            { id: 18, title: '观察者和发布订阅者区别' },
            { id: 19, title: '浏览器解析渲染页面过程' },
            { id: 20, title: '谈一下EventLoop' },
            { id: 21, title: 'GET和POST有什么区别' },
            { id: 22, title: '谈一下防抖和节流' },
            { id: 23, title: '数组如何去重' },
            { id: 24, title: '数组如何排序' },
            { id: 25, title: '谈一下常用设计模式，并选择一个进行场景分析' },
            { id: 26, title: '谈一下for...of' },
            { id: 27, title: '前端常见攻击方式' },
            { id: 28, title: '前端有哪些跨域方案' },
            { id: 29, title: '前端网站常规优化方案' }
          ]
        },
        {
          title: '前端基础面试题',
          isShowQ: false,
          subArr: [{ title: '你是个傻掉吗' }]
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      try {
        const res = axios.get(`/app/audition/getAuditionList?page=1&size=10`, {
          proxy: {
            host: 'http://42.194.195.126',
            port: 'api'
          }
        })
        console.log('res', res)
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.main >>> .van-tabs__line {
  width: 40px !important;
}
.main {
  background-color: #f8f8f8;
  height: 100%;
  box-sizing: border-box;
  .arrow-in {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
  }
  .e-item:nth-of-type(1) {
    margin-top: 30px;
  }
  .e-item + .e-item {
    margin-top: 16px;
  }
  .e-item {
    // margin-top: 30px;
    margin: 0 16px;
    .show {
      background-color: #f0f0f0;
    }
    .hide {
      background-color: white;
    }
    .num {
      position: relative;
      span {
        width: 30px;
        height: 16px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #007aff;
        color: white;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 20px;
      }
    }
    div:nth-of-type(1) {
      // width: 100%;
      padding: 0 20px;
      height: 46px;
      border-radius: 2px 2px 0 0;
      line-height: 46px;
      display: flex;
      justify-content: space-between;
    }
    div:nth-of-type(2) {
      p {
        background-color: white;
        margin: 0;
        padding: 0;
        line-height: 40px;
        // width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        position: relative;
        // border-bottom: 1px solid red;
      }
      p + p {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
